<template>
  <!-- 策划检查履职情况 -->

  <a-form-model ref="ruleForm" :model="sinceTheSituation" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :rules="editModel == 0 ? {} : rules">
    <a-spin :spinning="loading">
      <!-- 表单 -->

      <title-name title="分公司重点项目策划检查履职情况"></title-name>
      <s-table
        bordered
        ref="table"
        tableLayout="fixed"
        rowKey="code"
        size="default"
        :columns="sinceTheSituationColumns"
        :data="sinceTheSituationData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :showPagination="false"
      >
        <template v-for="col in ['remarks']" :slot="col" slot-scope="text, record">
          <div :key="col" class="form-item">
            <BaseTextarea v-if="col === 'remarks'" :class="col === 'remarks' ? 'remark' : ''" v-model="record[col]" :disabled="editModel == 0" :maxLength="1000" />
          </div>
        </template>
      </s-table>

      <div>注：此处只统计重点项目的数据</div>
      <!-- 页脚操作栏 -->
      <div class="btn_box tool-btns--fixed" style="bottom: 50px" v-if="editModel != 0">
        <a-button class="button_right" type="primary" @click="() => $emit('previousStep')">上一步</a-button>
        <a-button type="primary" @click="() => $emit('nextStep')">下一步</a-button>
      </div>
    </a-spin>
  </a-form-model>
</template>

<script>
import { api } from '@/api/project/performanceAnalysis'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BSelect from '@/components/BComponents/BSelect'

import { sinceTheSituationColumns } from '../model.js'

export default {
  name: 'sinceTheSituation',
  extends: new BaseEditPage(),
  components: {
    BSelect
  },

  data() {
    this.sinceTheSituationColumns = sinceTheSituationColumns
    return {
      loading: false, // 加载控件
      editModel: 1, // 操作状态:0 查看;1 编辑
      sinceTheSituation: { plandutyDTOList: [] },
      sinceTheSituationData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.sinceTheSituation.plandutyDTOList || []
          })
        })
      },

      rules: { month: [{ required: true, message: '请选择' }] }, // 校验规则
      init: false // 初始化控件
    }
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: {}
    }
  },
  watch: {
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.editModel = 0
          })
        }
      }
    }
  },
  computed: {},
  mounted() {
    this.sinceTheSituation = this.form
    this.initColumns()
    this.$refs.table.refresh(true)
  },

  methods: {
    initColumns() {
      this.sinceTheSituationColumns[1].customRender = (text, row, index) => {
        let obj = {
          children: text,
          attrs: {}
        }
        let lastIndex = -1
        let firstIndex = this.sinceTheSituation.plandutyDTOList.findIndex((v) => v.dutyPersonName === text)
        this.sinceTheSituation.plandutyDTOList.map((m, i) => {
          if (m.dutyPersonName == text) {
            lastIndex = i
          }
        })
        // 若该行内容和上一行一致，则使其隐藏
        if (index > 0 && this.sinceTheSituation.plandutyDTOList[index - 1].dutyPersonName == text) {
          obj.attrs.rowSpan = 0
          // 若不是，则往下合并与改行内容一致行的总行数
        } else {
          obj.attrs.rowSpan = lastIndex === firstIndex ? 1 : lastIndex + 1 - firstIndex
        }
        return obj
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .form-item  {
  .ant-input:not([disabled]),
  .ant-select:not(.ant-select-disabled) .ant-select-selection,
  .ant-calendar-picker-input,
  .ant-input-number:not([disabled]),
  .ant-cascader-picker {
    border-color: #e4ac0b;

    background-color: #fff9e8;
  }
  .ant-input-disabled,
  .ant-input-number-disabled .ant-input-number-input,
  .ant-time-picker-input[disabled] {
    border-color: #d9d9d9 !important;
    background-color: #f5f5f5 !important;
  }

  .remark {
    .ant-input {
      border-color: inherit;
      background-color: initial;
    }
  }
}
</style>